<div class="form__wrapper">
  <div class="card pt-4">
    <div class="card-section">
      <div class="row column">
        <%= form.translated :text_field, :title, aria: { label: :title }, data: { "text-copy" => true, "target" => "strong[data-label-preview]" } %>
      </div>
      <div class="row column">
        <%= form.translated :text_area, :announcement_title, aria: { label: :announcement_title }, data: { "text-copy" => true, "target" => "div[data-announcement-preview] .flash__title" } %>
      </div>

      <div class="row column proposal-status__color">
        <% Decidim::Proposals::ProposalState.colors.each do |color_key, color_values| %>
          <% state_id = "proposal_state_text_color_#{color_values[:foreground].delete("#").downcase}" %>
          <style>
            <%= "##{state_id}" %> {
              box-shadow:  0 0 0 1.5px <%= color_values[:foreground] %>, 0 0 0 6px <%= color_values[:background] %>;
              accent-color: <%= color_values[:foreground] %>;
            }

            <%= "##{state_id}" %>:checked  {
              box-shadow: 0 0 0 6px <%= color_values[:foreground] %>;
            }
          </style>
          <%= form.radio_button :text_color, color_values[:foreground],
                                label: color_values[:name],
                                class: "!mr-4",
                                data: {
                                  "sync-radio-buttons" => true,
                                  "sync-radio-buttons-value" => color_key,
                                  "css-preview" => true,
                                  "css-preview-updates" =>
                                    "strong[data-label-preview]:color:#{color_values[:foreground]}; " +
                                    "div[data-announcement-preview]:color:#{color_values[:foreground]}; " +
                                    "div[data-announcement-preview]:borderColor:#{color_values[:foreground]}/var(--tw-border-opacity)"
                                } %>

          <%= form.radio_button :bg_color, color_values[:background],
                                label: color_values[:name],
                                style: "display: none;",
                                data: {
                                  "sync-radio-buttons-value-target" => color_key,
                                  "css-preview" => true,
                                  "css-preview-updates" =>
                                    "strong[data-label-preview]:backgroundColor:#{color_values[:background]}; " +
                                    "div[data-announcement-preview]:backgroundColor:#{color_values[:background]};"
                                } %>
        <% end %>

        <div class="mt-8">
          <strong class="label" style="<%= "background-color: #{form.object.bg_color}; color: #{form.object.text_color};" %>" data-label-preview>
            <%= decidim_escape_translated(form.object.title).presence || t(".preview") %>
          </strong>
        </div>

        <div class="flash flex-col" style="<%= "background-color: #{form.object.bg_color}; color: #{form.object.text_color}; border-color: #{form.object.text_color} / var(--tw-border-opacity);" %>" data-announcement-preview>
          <div class="flash__title">
            <%= decidim_escape_translated(form.object.announcement_title).presence || t(".preview") %>
          </div>
          <div class="flash__message">
            <p></p><div class="rich-text-display">Id voluptate amet optio nobis temporibus ipsam veritatis distinctio dolore.</div><p></p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
